import React from 'react'
import styled from 'styled-components'
// DOM样式
// 1.行内样式
// 2.class样式 ---- class 在react关键字  ---- class ===> className
//    可以把css文件当成模块来使用
// 3.不同的条件添加不同的样式 btn btn-success btn-fail
// 4.classnames模块 btn btn-success btn-fail
// 5.css-in-js

const Img = styled.img`
  width: 300px;
`
const Button = styled.button`
  font-size: 30px
`


class App extends React.Component {
  
  render () {
    
    return (
      <>
        {/* 写行内样式  如果需要写px的，可以省略 */}
        <img style={{ width: 100, height: 'auto'}} src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt=""/>
        <Img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="" />
        <Button>按钮</Button>
      </>
    )
  }
}

export default App